<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>评论</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyCatalogs.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css"/>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/common.js"></script>
    <script>
        $(function () {
            // 获得游记id
            var id = getParams().id;
            var comments;
            var currentPage = 1;
            var pages;
            // 显示回复内容
            $.get("/comments/" + id, function (data) {
                pages = data.pages;
                comments = data.list;
                $("#comment").renderValues(data, {
                    handle: function (ele, value) {
                        // 个人信息页面
                        ele.href = "/userProfiles.html?id=" + value;
                    }
                });

                // 翻页
                $(window).scroll(function () {
                    if (isEnd()) {
                        // 判断是否有下一页
                        if(currentPage < pages){
                            // currentPage +1 , 发送ajax请求获取下一页到游记
                            currentPage++;
                            $.get("/comments/" + id, {"currentPage": currentPage}, function (data) {
                                // 返回的数据只有翻页后的数据，没有当前页的数据，直接渲染原来的数据就没有了
                                // 原来的数据+当前的数据
                                $.merge(comments, data.list);
                                $("#comment").renderValues({list: comments}, {
                                    handle: function (ele, value) {
                                        console.log(ele);
                                        // 个人信息页面
                                        ele.href = "/userProfiles.html?id=" + value;
                                    }
                                })
                            },"json");
                        } else {
                            $(document).dialog({
                                type:"notice",
                                infoText:"已经到底部了",
                                autoClose:2500,
                                position:"bottom"
                            });
                        }

                    }
                });

                var user = JSON.parse(sessionStorage.getItem("user"));
                // 弹出点评框
                $("#commentBtn").click(function () {
                    // 判断是否登录
                    if (user){
                        $("#content").val("");
                        var dis = $(".onComment").attr("style");
                        if (dis){
                            $(".onComment").attr("style", "");
                        } else {
                            $(".onComment").attr("style", "display:none");
                        }
                        $("#content").focus();

                    } else {
                        // 跳转到登录界面
                        $(document).dialog({
                            type:"confirm",
                            style:"ros",
                            titleShow:false,
                            content:"登录后才可以进行评论",
                            buttons:[{
                                name:"跳转到登陆界面",
                                callback:function () {
                                    location.href="/login.html";
                                }
                            }]
                        });
                    }
                });


                // 评论
                $(".commentSubmit").click(function () {
                    console.log(id);
                    var content = $("#content").val();
                    $.post("/comments/" + id, {"content": content}, function (data) {
                        $(document).dialog({
                            type:"confirm",
                            style:"ros",
                            titleShow:false,
                            content:"评论成功",
                            buttons:[{
                                name:"确定",
                                callback:function () {
                                    window.location.reload();
                                }
                            }]
                        });

                    });
                });

            });

        })
    </script>
    <style>
        .operation1{
            width: 100%;
            display: inline-table;
            position: fixed;
            bottom: 0px;
            max-width: 500px;
            z-index: 9;
            background-color: white;
        }
    </style>
</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"> 挪窝窝 </i></span>
            </a>
        </div>
        <div class="col">
            <!--<a href="javascript:history.go(-1);">-->
                <!--<span><i class="fa fa-chevron-left"> 官网首页 </i></span>-->
            <!--</a>-->
        </div>
    </div>
</div>
<div class="travels">
    <img  class="cover" >
    <div class="container">
            <div class="read" style="text-align: center">
                <a href="javascript:history.go(-1);">
                返回文章 <span></span>
                </a>
            </div>
        <hr>
    </div>


    <div id="comment">
        <div render-loop="list">
            <div class="container row comment">
                <div class="col-2 comment-head">
                    <a href="" render-key="list.commentator.id" render-fun="handle">
                        <img class="rounded-circle"
                             render-src="list.commentator.headImgUrl">
                    </a>
                </div>
                <div class="col comment-right">
                    <p class="authorName"><span render-html="list.commentator.nickName"></span></p>
                    <span class="comment-star"><i
                            class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i
                            class="fa fa-star"></i><i class="fa fa-star-o"></i></span>
                    <span class="comment-date" render-html="list.time"></span>
                    <div class="comment-content" >
                            <p render-html="list.content"></p>
                    </div>

                    <!--<ul class="comment-img">-->
                    <!--<li>-->
                    <!--<img src="/upload/953e8fed-c49d-454a-85d9-2ed9ecf6eb18.jpeg">-->
                    <!--</li>-->
                    <!--</ul>-->

                    <div class="d-flex icon">
                            <i class="fa  fa-commenting-o " style="margin-right: 10px"> 评论 </i>
                            <i class="fa fa-thumbs-o-up"> <span>0</span> </i>
                    </div>

                </div>
            </div>

        </div>
    </div>
    <!-- 点评框 -->
    <div class="container onComment" style="display: none">
        <div class="commentbox ">
            <textarea cols="40" rows="3" placeholder="来说几句吧......" id="content"></textarea>
            <button class="btn btn-info pull-right commentSubmit">发送</button>
        </div>
        <div class="comment-list">
        </div>
    </div>

    <div class="container d-flex operation1" id="commentBtn">
        <div class="p-2  flex-fill" ><i class="fa  fa-commenting-o"  > </i>
            写评论
        </div>
    </div>

</div>

</body>
</html>